<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../css/style.css" />
		<style type="text/css">
			html,body{
				height:100%;
				background-color: transparent !important;
				overflow-x: auto;
				-webkit-overflow-scrolling:touch;
				animation:fadein 0.3s linear 1;
				-webkit-animation:fadein 0.3s linear 1;
				-moz-animation:fadein 0.3s linear 1;
				-o-animation:fadein 0.3s linear 1;
				-ms-animation:fadein 0.3s linear 1;
			}
			#content { width: 100%; position: fixed; top: 30%; bottom:0; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling:touch; 
				border-top-left-radius: 12px;
				border-top-right-radius: 12px;
			}
			.info_box{ display: block; width:100%;  background-color: #fff; box-sizing: border-box; padding: 0; z-index: 12;}
			.info_box .top{
				position: relative;
				display: flex;
				justify-content: space-between;
				background: #fff;
			}
			.info_box .top::after{ position: absolute; content: ""; left: 0; right: 0; bottom: 0; border-bottom: 1px #d4d4d4 solid; transform: scaleY(0.5);}

			.info_box .top div { font-size: 15px; padding:0 10px; font-weight:600; color:#666; height: 55px; line-height: 55px; }
			.info_box .top .title { color:#333; font-weight: bold; }
			.info_box .top span { background-color:#3262F1; color:#fff; padding: 4px 12px; border-radius: 4px; }
			.a-active { color:#F77E1C !important; }
			
			.Area{ width: 100%; overflow:hidden; background: #fff; height: 100%;position: relative; }
			.Area .block{ height: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing:border-box; overflow-y: auto;}
			.AreaLeft{ width: 34%; float: left; background-color:#f6f6f6;  padding-bottom: 60px;}
			.AreaLeft ul li{ width: 100%; padding: 13px 0; line-height: 25px; text-align:center; color:#333; font-size:14px;}
			.AreaLeft ul li:active{ background-color: #f8f8f8; }
			.Area ul li.on{ background-color:#fff; color:#3262F1; font-weight:bold; }
			.leftarea{ color:#3262F1;}
			.on{ color:#3262F1;}
			.AreaCenter{ width: 66%; float: left; padding-bottom: 60px; }
			.AreaCenter ul li{ padding: 13px 0;  line-height: 25px; text-align:center; font-size:14px; border:0px red solid; width:100%;}
			.AreaRight{ width: 0%; float: left; padding-bottom: 60px; }
			.AreaRight ul li{ width: 100%;  padding: 13px 0; line-height: 25px; text-align:center; font-size:14px;}
			
			.Area b {
				background: #f1f3f4;
				display: block;
				font-size: 12px;
				color: #999;
				line-height: 40px;
				font-weight: 400;
				text-align: center;
			}
			
			.display-none { display:none !important; }
			
			.search_no{ padding: 40% 0 0;}
			.search_no img{ margin:0 auto; width: 30px;}
			.search_no p{ text-align: center; font-size: 12px; color: #9f9f9f; line-height: 45px; padding-bottom: 5px;}
			
			
			@keyframes fadein{
				0%{opacity: 0;
					 }
				100%{
					opacity: 1;

				}
			}
			@-webkit-keyframes fadein{
					0%{opacity: 0;
					 }
				100%{
					opacity: 1;

				}
			}
			@-moz-keyframes fadein{
					0%{opacity: 0;
					 }
				100%{
					opacity: 1;

				}
			}
			@-o-keyframes fadein{
					0%{opacity: 0;
					 }
				100%{
					opacity: 1;

				}
			}
			@-ms-keyframes fadein{
					0%{opacity: 0;
					 }
				100%{
					opacity: 1;

				}
			}
		</style>
	</head>
	<body>
		<div id="filter" style="height:100%;">
			<div id="content">
				
				<div class="Area" id="arealist">
					<div class="info_box">
					<div class="top">
						<div tapmode="a-active" onclick="closeframe()">取消</div>
						<div class="title">选择目的地</div>
						<div tapmode="a-active" onclick="setAddress()"><span>完成</span></div>
					</div>
				</div>
					<div class="block AreaLeft">
						<ul id="provincelist">
							
						</ul>
						<script id="provincelist_template" type="text/template">
						{{ for (var i = 0, len = it.length; i < len; i++) { }}
						<li class="leftarea{{? i==0}} on{{?}}" tapmode onclick="selProvince(this,{{=i}});" data-id="{{=it[i].id}}">{{=it[i].name}}</li>
						{{ } }}
					</script>
					</div>
					<div class="block AreaCenter" id="AreaCenter">
						<ul id="citylist">
							
						</ul>
						<script id="citylist_template" type="text/template">
						{{ for (var i = 0, len = it.length; i < len; i++) { }}
						<li class="centerarea" tapmode onclick="selCity(this,{{=i}});" data-id="{{=it[i].id}}">{{=it[i].name}}</li>
						{{ } }}
						</script>
						
						<div class="search_no display-none" id="divnodata">
							<img src="../../image/nolines.png" alt="" />
							<p>暂无常用地址</p>
							<!-- <p>发布过的货源出发地会显示在这里</p> -->
						</div>
					</div>
					<div class="block AreaRight" id="AreaRight">
						<ul id="xianlist">
							
						</ul>
						<script id="arealist_template" type="text/template">
						{{ for (var i = 0, len = it.length; i < len; i++) { }}
						<li class="rightarea" tapmode onclick="selArea(this);" data-id="{{=it[i].id}}">{{=it[i].name}}</li>
						{{ } }}
						</script>
					</div>
				</div>
				
			</div>
		</div>
		
	</body>
	<script type="text/javascript" src="../../script/api.js" ></script>
	<script type="text/javascript" src="../../script/app.js" ></script>
	<script type="text/javascript" src="../../script/doT.js"></script>
	<script type="text/javascript">
		var fromfrm;
		var destlist;
		var provinceJson, cityJson, areaJson;
		var provinceId = 0, cityId = '', areaId = '', address = '', provinceName = '', cityName = '', areaName = '';
		var destarea = '';	
		apiready = function() {
			fromfrm = api.pageParam.fromfrm;
			destlist = api.pageParam.destlist;
			//点击空白处移除Frame
			var myDiv = document.getElementById("filter");
			myDiv.addEventListener("touchstart",function(){
				closeframe();
			});
			var myDiv1 = document.getElementById("content");
			myDiv1.addEventListener("touchstart",function(event){
				event=event||window.event;
				event.stopPropagation();
			});
			getJsonFromAPI();
		}
		function setAddress() {
			if(cityId == '') {
				if(provinceId == 0) {
					toast('请选择地址');
					return false;
				}
				toast('请选择城市');
				return false;
			}
			if(areaId == '') {
				toast('请选择县/区');
				return false;
			}
			var addrjson = {
				'destprovinceId': provinceId,
				'destcityId': cityId,
				'destareaId': areaId,
				'destarea': destarea,
				'address': address
			};
			api.execScript({
				name: fromfrm,
				script: 'setDestAddr(\''+$api.jsonToStr(addrjson)+'\');'
			});
			closeframe();
		}
		function closeframe() {
			api.setFrameAttr({
				name: api.frameName,
				hidden: true
			});
		}
		function getJsonFromAPI() {
			$api.css($api.byId('arealist'),'display:block');
			api.readFile({
				path: 'widget://res/city.json'
			}, function(ret, err) {
				if (ret.status) {
					var data = ret.data;
					provinceJson = $api.strToJson(data);
					var changyongsub = [];
					
					for(var item in destlist) {
						var subinfo = {};
						subinfo['name'] = destlist[item].destalladdress;
						subinfo['id'] = item;
						subinfo['sub'] = [];
						
						changyongsub.push(subinfo);
					}
					
					//var ndata = {"name":"常用","id":"0","sub":[{"name":"浙江省-杭州市-下沙区", "id":1, "sub": []}]};
					var ndata = {"name":"常用","id":"0","sub":changyongsub};
					provinceJson.splice(0, 0, ndata); //首位插入全国
					UpdateList('provincelist','provincelist_template',provinceJson,false);
					//cityJson = provinceJson[0].sub;
					//cityJson = [];
					//UpdateList('citylist','citylist_template',cityJson,false);
					cityJson = provinceJson[0].sub;
					UpdateList('citylist','citylist_template',cityJson,false);
					
					if(cityJson.length == 0) {
						$api.removeCls($api.byId('divnodata'),'display-none');
					}
					
					//areaJson = cityJson[0].sub;
					areaJson = [];
					UpdateList('xianlist','arealist_template',areaJson,false);
				} else {
					//alert(err.msg);
				}
			});
		}
		function selProvince(obj,index) {
			//选择省份
			provinceId = $api.attr(obj,'data-id');
			provinceName = $api.text(obj);
			var liList = document.getElementById("provincelist").children;
			for (var i = 0; i < liList.length; i++) {
				$api.removeCls(liList[i], 'on')
			}
			$api.addCls(obj,'on');
			if(provinceId == 0)
			{
				provinceName = '';
				cityName = '';
				areaName = '';
				
				cityId = '';
				areaId = '';
				$api.css($api.byId('AreaCenter'),'width:66% !important');
				$api.css($api.byId('AreaRight'),'width:0% !important');
				
				
				cityJson = provinceJson[index].sub;
				
				if(cityJson.length == 0) {
					$api.removeCls($api.byId('divnodata'),'display-none');
				}
				UpdateList('citylist','citylist_template',cityJson,false);
				
				areaJson = [];
				UpdateList('xianlist','arealist_template',areaJson,false);
			}
			else
			{
				cityId = '';
				cityName = '';
				areaId = '';
				areaName = '';
				$api.addCls($api.byId('divnodata'),'display-none');
				
				$api.css($api.byId('AreaCenter'),'width:33% !important');
				$api.css($api.byId('AreaRight'),'width:33% !important');

				cityJson = provinceJson[index].sub;
				UpdateList('citylist','citylist_template',cityJson,false);
				
				areaJson = [];
				UpdateList('xianlist','arealist_template',areaJson,false);
			}
		}
		function selCity(obj,index) {
			//选择城市
			cityId = $api.attr(obj,'data-id');
			cityName = $api.text(obj);
			var liList = document.getElementById("citylist").children;
			for (var i = 0; i < liList.length; i++) {
				$api.removeCls(liList[i], 'on')
			}
			$api.addCls(obj,'on');
			if(cityId < 10000)
			{
				var item = cityId;
				provinceId = destlist[item].destprovinceId;
				cityId = destlist[item].destcityId;
				areaId = destlist[item].destareaId;
				
				destarea = cityName;
				address = destlist[item].destaddress;
			}
			else
			{
				areaId = '';
				areaName = '';
				areaJson = cityJson[index].sub;
				UpdateList('xianlist','arealist_template',areaJson,false);
			}
		}
		function selArea(obj) {
			areaId = $api.attr(obj,'data-id');
			areaName = $api.text(obj);
			address = '';
			destarea = provinceName+'-'+cityName+'-'+areaName;
			var liList = document.getElementById("xianlist").children;
			for (var i = 0; i < liList.length; i++) {
				$api.removeCls(liList[i], 'on')
			}
			$api.addCls(obj,'on');
			
			
		}
		//渲染数据
		function UpdateList(domId,templateId,jsondata,isAppend) {
			//console.log(JSON.stringify(jsondata));
			var act_content = $api.byId(domId);
			//$api.html(act_content,'');
			setTimeout(function() {
				var tempFn = doT.template($api.byId(templateId).innerHTML);
				var resultText = tempFn(jsondata);
				//alert(isAppend);
				//console.log(resultText);
				if(isAppend)
				{
					$api.append(act_content, resultText);
				}
				else
				{
					$api.html(act_content, resultText);
				}
				api.parseTapmode();
			}, 0);
		}
	</script>
</html>